<template>
  <div>
    <!-- `/article/${article.art_id}` -->
    <van-cell
    class="article-item" :to="{
      name:'article',
      params: {
        articleId:article.art_id
      }
    }">
    <div slot="title" class="title van-multi-ellipsis--l2">{{article.title}}</div>
    <!-- 三张图和评论 -->
    <div slot="label">
      <div class="cover-wrap" v-if="article.cover.type ===3" >
          <div class="cover-item"
           v-for="(img,index) in article.cover.images"
            :key="index">
            <van-image class="cover-item-img"
                 fit="cover"
                  :src="img"
                />
          </div>

      </div>
       <!-- 评论 -->
       <div class="label-info-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate | relativeTime }}</span>
      </div>
    </div>
<!-- 右边的图片 -->
      <van-image slot="default"
      v-if="article.cover.type ===1"
       class="right-cover"
        fit="cover"
        :src="article.cover.images[0]"
/>
  </van-cell>
  </div>
</template>

<script>
import { relativeTime } from 'dayjs/locale/zh-cn'
export default {
  name: 'ArticleItem',
  props: {
    article: {
      type: Object,
      require: true
    }
  },
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.article-item {
    .title {
    font-size: 16px;
    color: #3a3a3a
  }
  .van-cell__value {
    flex: unset;
    width: 116px;
    height: 73px;
    padding-left: 12.5px;
  }
  .right-cover {
    width: 116px;
    height: 73px;
  }
  .label-info-wrap sapn{
    font-size: 11px;
    color: #b4b4b4;
    margin-right: 12.5px;
  }
  .cover-wrap {
    display: flex;
    padding: 15px 0;
    .cover-item {
      flex: 1;
      height: 73px;
      &:not(:last-child) {
         padding-right: 2px;
      }
      .cover-item-img {
        width: 100%;
        height: 73px;
      }
    }
  }
}

</style>
